<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            user-select: none;
        }

        li {
            list-style: none;
        }

        .box {
            width: 400px;
            margin: 100px auto;
        }

        .hobby li {
            width: 300px;
            height: 40px;
            border: 1px solid black;
            border-bottom: 0;
        }

        .hobby li,
        .allSelect {
            background: url(./img/ckbg1.jpg) no-repeat 10px center lightseagreen;
        }

        .hobby li.checked,
        .allSelect.checked {
            background-image: url(./img/ckbg2.jpg);
        }

        input {
            margin-left: 15px;
            width: 20px;
            height: 40px;
        }

        .hobby li span {
            float: right;
            margin: 10px 20px 0 0;
        }

        .all {
            position: relative;
            width: 300px;
            height: 40px;
            border: 1px solid black;
            background: lightseagreen;
        }

        .all .allSelect {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80px;
            line-height: 40px;

        }

        .all .allSelect span {
            margin-left: 46px;
        }


        .reverse {
            position: absolute;
            top: 5px;
            right: 140px;
            width: 50px;
            height: 30px;
            border: 1px solid black;
            background: lightcoral;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="hobby">
            <li> <span>唱</span></li>
            <li><span>跳</span></li>
            <li><span>rap</span></li>
            <li><span>篮球</span></li>
            <li> <span>其他</span></li>
            <li> <span>唱</span></li>
            <li><span>跳</span></li>
            <li><span>rap</span></li>
            <li><span>篮球</span></li>
            <li> <span>其他</span></li>
        </ul>
        <div class="all">
            <div class="allSelect"><span>全选</span></div>
            <div class="reverse">反选</div>
        </div>
    </div>


    <script>

        let lis = document.querySelectorAll(".hobby li"),
            allSelect = document.querySelector(".allSelect"),
            reverse = document.querySelector(".reverse"),
            len = lis.length,
            num = 0;
        allSelect.status = false,
            // console.log(allSelect);
            lis.forEach((item, index) => {
                item.status = false
                item.onclick = function () {
                    item.status = !item.status
                    item.classList.toggle("checked")
                    // console.log(item.status);
                    if (item.status) {
                        num++
                    } else {
                        allSelect.status = false
                        num--
                    }
                    isActive()
                }
            });
        allSelect.onclick = function () {
            this.status = !this.status
            if (this.status) {
                this.classList.add("checked")
                num = len
                lis.forEach((item, i) => {
                    item.status = true
                    item.classList.add("checked")
                })
            } else {
                allSelect.classList.remove("checked")
                num = 0
                lis.forEach((item, i) => {
                    item.status = false
                    item.classList.remove("checked")
                })
            }
        }
      
        reverse.onclick = function () {
            lis.forEach((item, index) => {
                item.status = !item.status
                item.classList.toggle("checked")
            })
            num = len - num
            isActive()
        }
          //判断是够全选中
          function isActive() {
            if (num === len) {
                allSelect.classList.add("checked")
            } else {
                allSelect.classList.remove("checked")
            }
        }
    // let inp = document.querySelectorAll(".hobby input"),
    //         lis = document.querySelectorAll(".hobby li"),
    //         // console.log(inp);
    //         allSelect = document.querySelector(".allSelect"),
    //         reverse = document.querySelector(".reverse");

    //     allSelect.onclick = function () {
    //         for (var i = 0; i < inp.length; i++) {
    //             inp[i].checked = allSelect.checked
    //         }
    //     }
    //     for (let i = 0; i < inp.length; i++) {
    //         inp[i].onclick = function () {
    //             isActive()
    //         }
    //     }
    //     reverse.onclick = function () {
    //         for (var i = 0; i < inp.length; i++) {
    //             inp[i].checked = !inp[i].checked
    //             isActive()
    //         }

    //     }

    //     //判断是否全选中
    //     function isActive() {
    //         var flag = true
    //         for (let j = 0; j < inp.length; j++) {
    //             if (!inp[j].checked) {
    //                 flag = false
    //                 break;
    //             }
    //         }
    //         allSelect.checked = flag
    //     } 
    </script>
</body>

</html>